<template>
  <div>
    <my-header :showBack="true" title="数字资产" :rightText="'交易记录'"></my-header>
    <div class="digit_assets">
      <div class="top_data">
        <img src="../../assets/img/my/logo.png" alt="" srcset="">
        <!-- <div>CEC市值($)：{{indexData.dollarRate}}</div> -->
      </div>
      <section class="my_assets">
        <div class="my_assets_box">
          <div class="my_assets_left_box">
            <span><i class="color_lump_f60"></i>CEC 资产：<em>{{Math.floor(indexData.useCoin*100)/100}}</em></span>
            <span><i class="color_lump_860000"></i>钱包地址</span>
          </div>
          <div class="my_assets_right_box">
            <span @click="promote" class="copy_my_assets" :data-clipboard-text="indexData.customerPurse">复制地址</span>
          </div>
        </div>
        <div>
          <input type="text" v-model="indexData.customerPurse" readonly>
        </div>
      </section>
      <ul class="all_cion">
        <li v-for="(item,index) in coins">
          <label><img :src="item.logo" alt="" srcset=""><i>{{item.name}}</i></label>
          <section>
            <div class="cion_left">
              <span>{{Math.floor(item.assets*100)/100}}</span>
              <span>{{item.desc}}</span>
            </div>
            <div class="cion_center">
              <span>{{item.priceUSD}}</span>
              <span>当前价格(USD)</span>
            </div>
            <div class="cion_right">
              <em @click="cashTrade(index)">现金交易</em>
              <em @click="surplusTrade(index)">余额交易</em>
            </div>
          </section>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import header from "@/components/header";
import $ from "jquery";
import { Toast } from "vant";
import ClipboardJS from 'Clipboard'

export default {
  components: {
    "my-header": header
  },
  data() {
    return {
      indexData:{
        useCoin:0
      },
      coins: [
        {
          logo:require('../../assets/img/cionLogo/cec.png'),
          name: "商业链",
          assets: 0.0,
          priceUSD: 0,
          desc: "CEC 资产"
        },
        {
          logo:require('../../assets/img/cionLogo/btc.png'),
          name: "比特币",
          assets: 0.0,
          priceUSD: 0,
          desc: "BTC 资产"
        },
        {
          logo:require('../../assets/img/cionLogo/eth.png'),
          name: "以太坊",
          assets: 0.0,
          priceUSD: 0,
          desc: "ETH 资产"
        },
        {
          logo:require('../../assets/img/cionLogo/xrp.png'),
          name: "瑞波",
          assets: 0.0,
          priceUSD: 0,
          desc: "XRP 资产"
        },
        {
          logo:require('../../assets/img/cionLogo/bch.png'),
          name: "比特现金",
          assets: 0.0,
          priceUSD: 0,
          desc: "BCH 资产"
        },
        {
          logo:require('../../assets/img/cionLogo/eos.png'),
          name: "EOS",
          assets: 0.0,
          priceUSD: 0,
          desc: "EOS 资产"
        },
        {
          logo:require('../../assets/img/cionLogo/ltc.png'),
          name: "莱特币",
          assets: 0.0,
          priceUSD: 0,
          desc: "LTC 资产"
        },
        {
          logo:require('../../assets/img/cionLogo/xlm.png'),
          name: "恒星币",
          assets: 0.0,
          priceUSD: 0,
          desc: "XLM 资产"
        },
        {
          logo:require('../../assets/img/cionLogo/ada.png'),
          name: "艾达币",
          assets: 0.0,
          priceUSD: 0,
          desc: "ADA 资产"
        },
        {
          logo:require('../../assets/img/cionLogo/trx.png'),
          name: "波场",
          assets: 0.0,
          priceUSD: 0,
          desc: "TRX 资产"
        }
      ]
    };
  },
  mounted() {
    this.selectIndexData();
    this.getAllCoin();
  },
  methods: {
    selectIndexData() {
      this.$ajax(this.$api.selectIndexData).then(res => {
        if (res.code == 0) {
          this.coins[0].assets = res.data.useCoin;
          this.coins[0].priceUSD = res.data.dollarRate;
          this.indexData = res.data;
        }
      });
    },
    cashTrade(index){
      if(index==0){
        this.pushPath('/CECTrade')
      }
    },
    surplusTrade(index){
      if(index==0){
        this.pushPath('/convertCEC')
      }
    },
    getAllCoin() {
      //BTC
      $.ajax({url: 'https://api.coinmarketcap.com/v1/ticker/bitcoin/?convert=CNY',type: "get",
        success:(res)=>{
          this.coins[1].priceUSD = res[0].price_usd;
        },
        error: function(e) {
          console.log(e);
        }
      })
      //ETH
      $.ajax({url: 'https://api.coinmarketcap.com/v1/ticker/ethereum/?convert=CNY',type: "get",
        success:(res)=>{
          this.coins[2].priceUSD = res[0].price_usd;
        },
        error: function(e) {
          console.log(e);
        }
      })
      //XRP
      $.ajax({url: 'https://api.coinmarketcap.com/v1/ticker/ripple/?convert=CNY',type: "get",
        success:(res)=>{
          this.coins[3].priceUSD = res[0].price_usd;
        },
        error: function(e) {
          console.log(e);
        }
      })
      //BCH
      $.ajax({url: 'https://api.coinmarketcap.com/v1/ticker/bitcoin-cash/?convert=CNY',type: "get",
        success:(res)=>{
          this.coins[4].priceUSD = res[0].price_usd;
        },
        error: function(e) {
          console.log(e);
        }
      })
      //EOS
      $.ajax({url: 'https://api.coinmarketcap.com/v1/ticker/eos/?convert=CNY',type: "get",
        success:(res)=>{
          this.coins[5].priceUSD = res[0].price_usd;
        },
        error: function(e) {
          console.log(e);
        }
      })
      //LTC
      $.ajax({url: 'https://api.coinmarketcap.com/v1/ticker/Litecoin/?convert=CNY',type: "get",
        success:(res)=>{
          this.coins[6].priceUSD = res[0].price_usd;
        },
        error: function(e) {
          console.log(e);
        }
      })
      //XLM
      $.ajax({url: 'https://api.coinmarketcap.com/v1/ticker/stellar/?convert=CNY',type: "get",
        success:(res)=>{
          this.coins[7].priceUSD = res[0].price_usd;
        },
        error: function(e) {
          console.log(e);
        }
      })
      //ADA
      $.ajax({url: 'https://api.coinmarketcap.com/v1/ticker/Cardano/?convert=CNY',type: "get",
        success:(res)=>{
          this.coins[8].priceUSD = res[0].price_usd;
        },
        error: function(e) {
          console.log(e);
        }
      })
      //TRX
      $.ajax({url: 'https://api.coinmarketcap.com/v1/ticker/tron/?convert=CNY',type: "get",
        success:(res)=>{
          this.coins[9].priceUSD = res[0].price_usd;
        },
        error: function(e) {
          console.log(e);
        }
      })
    },
    promote() {
      if (this.indexData.customerPurse != "") {
        const clipboard = new ClipboardJS('.copy_my_assets');
        clipboard.on('success', function(e) {
            e.clearSelection();
            Toast({
              message: "复制地址成功",
              position: "bottom"
            });
        });
        clipboard.on('error', function(e) {
          Toast({
              message: "复制地址失败，请选择复制",
              position: "bottom"
            });
        });
      }
    }
  }
};
</script>

<style scoped>
.digit_assets {
  background-color: #f5f5f5;
}
.top_data {
  background: #25a3fe;
  text-align: center;
  color: #fff;
  padding-bottom: 20px;
  font-size: 14px;
}
.top_data img {
  width: 20%;
  margin: 20px;
}
.my_assets {
  background: #fff;
  padding: 15px 5px;
  font-size: 14px;
  border-top: 1px #eee solid;
  border-bottom: 1px #eee solid;
  margin-top: 10px;
}
.my_assets_box {
  display: flex;
  align-items: center;
}
.my_assets_left_box {
  flex: 1;
}
.my_assets_left_box span {
  display: block;
  line-height: 25px;
  color: #666;
}
.my_assets_left_box em {
  color: #333;
}
.color_lump_f60 {
  width: 10px;
  height: 10px;
  background: #f60;
  display: inline-block;
  margin-right: 5px;
}
.color_lump_860000 {
  width: 10px;
  height: 10px;
  background: #860000;
  display: inline-block;
  margin-right: 5px;
}
.my_assets_right_box {
  flex: 1;
  max-width: 100px;
  text-align: center;
}
.my_assets_right_box span {
  padding: 3px 10px;
  border: 1px #f60 solid;
  color: #f60;
  display: inline-block;
  border-radius: 5px;
}
.my_assets input {
  width: 100%;
  margin-top: 5px;
  border: none;
}
.all_cion {
  margin-top: 10px;
  background: #fff;
  border-top: 1px #eee solid;
}
.all_cion li {
  font-size: 14px;
  padding: 10px 5px;
  border-bottom: 1px #eee solid;
}
.all_cion img{
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
.all_cion section{
  display: flex;
  align-items: center;
}
.all_cion span {
  display: block;
  line-height: 32px;
}
.all_cion div {
  flex: 1;
  max-width: 30%;
}
.cion_left span:last-child {
  color: #666;
  font-size: 12px;
}
.cion_center span:last-child {
  color: #666;
  font-size: 12px;
}
.cion_right {
  max-width: 40% !important;
  text-align: right;
}
.cion_right em:first-child {
  padding: 3px 10px;
  background: #1cc482;
  color: #fff;
  margin-right: 5px;
  display: inline-block;
  margin-bottom: 5px;
}
.cion_right em:last-child {
  padding: 3px 10px;
  background: #ffc828;
  color: #fff;
  margin-right: 5px;
  display: inline-block;
}
</style>
